<template>
    <div class="m-2 p-3" v-enter-helper="[initData, listQuery]">
      <el-card>
        <div slot="header" class="clearfix">
          <el-form :model="listQuery" inline>
            <el-form-item label="日期范围">
              <el-date-picker
                v-model="dateList"
                type="datetimerange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                format="yyyy-MM-dd HH:mm:ss"
                value-format="yyyy-MM-dd HH:mm:ss"
                @change="handlePanelChange">
              </el-date-picker>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="deBounceWrap(handleSearch)"
              >搜索
              </el-button
              >
              <el-button type="primary" @click="deBounceWrap(handleExport)"
              >导出
              </el-button
              >
            </el-form-item>
          </el-form>
        </div>
  
        <el-table :data="tableData" border v-loading="loading">
          <el-table-column label="序号" type="index" :index="indexMethod" prop="number" width='80px'></el-table-column>
          <el-table-column label="流水单号" prop="order_sn"></el-table-column>
          <el-table-column label="时间" prop="created_at"></el-table-column>
          <el-table-column label="操作内容" prop="desc"></el-table-column>
          <el-table-column label="积分数量" prop="change"></el-table-column>
          <el-table-column label="剩余积分数量" prop="balance"></el-table-column>
        </el-table>
        <cus-pagination
          v-show="total > 0"
          :limit.sync="listQuery.perPage"
          :page.sync="listQuery.page"
          :total="total"
          @pagination="initData"
        />
      </el-card>
    </div>
</template>
  
<script>
  import { walletLog, walletLogExport } from '@/api/sys/anchorList'

  export default {
    name: "financialStatements",
    data() {
      return {
        loading: false,
        listQuery: {
          start_time: undefined,
          end_time: undefined,
          page: 1,
          perPage: 10,
          user_id: undefined,
          type: 2
        },
        total: 0,
        dateList: [],
        tableData: [],
      };
    },
    created() {
      this.listQuery.user_id = this.$route.query.user_id
      this.listQuery.type = this.$route.query.type
      this.initData();
    },
    methods: {
      indexMethod(index) {
        return this.total - (this.listQuery.page-1) * this.listQuery.perPage - index
      },
      initData() {
        this.loading = true;
        for (let key in this.listQuery) {
            this.listQuery[key] = this.listQuery[key] === '' ? undefined : this.listQuery[key]
        }
        walletLog(this.listQuery)
          .then(res => {
            const {
              data: {list, meta}
            } = res;
            this.tableData = list;
            this.total = meta.total;
            this.listQuery.page = meta.page
          })
          .finally(() => (this.loading = false));
      },
      handleSearch() {
        // Solve the problem of parsing failure caused by the binding value becoming null when the date component is empty
        let [start_time, end_time] = this.dateList || [];
        this.listQuery.start_time = start_time
        this.listQuery.end_time = end_time
        this.initData(this.listQuery);
      },
      handleCurrentChange(page) {
        this.listQuery.page = page;
        this.initData(this.listQuery);
      },
      // 日期 picker 值变化的时候触发
      handlePanelChange(date) {
        if (date === null) {
          this.listQuery.start_time = undefined;
          this.listQuery.end_time = undefined;
        }
      },
      //
      handleExport() {
        let [start_time, end_time] = this.dateList || [];
        if (start_time)
          this.listQuery.start_time = parseInt(
            `${new Date(start_time).valueOf() / 1e3}`
          );
        if (end_time)
          this.listQuery.end_time = parseInt(
            `${new Date(end_time).valueOf() / 1e3}`
          );
  
          walletLogExport(this.listQuery).then(res => {
          location.href = res.data.download_url;
        });
      }
    }
  };
</script>
  
<style scoped></style>
  